<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键触发操作</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				 语法:	
					1.v-on:keydown="" 按下触发
					2.v-on:keyup=""   弹起来触发
					3.v-on:keypress="" 小键盘触发
				 按键支持:
					.enter  .tab
					.delete (捕获“删除”和“退格”键)
					.esc   .space
					.up .down .left .right
				 
				 需求:用户通过输入 按特殊的键位触发函数 
				 要求1. 按钮实现加法操作 num = num + num2
				 要求2. 用户按回车按钮实现触发 
				 要求3. 用户按空格键实现触发 
			-->
			<h3>用户数据:{{num}}</h3><br>
			<!-- <input type="text" v-on:keyup.enter="addNum" v-model="num2" /> -->
			<input type="text" v-on:keyup.space="addNum" v-model="num2" />
			<button @click="addNum">计算</button>
			
			
		</div>
		<script src="../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num: 100,
					num2: 0
				},
				methods: {
					addNum(){
						//this.num = this.num + this.num2
						//将字符串转化为数值类型
						this.num +=   parseInt(this.num2) 
					}
				}
			})
		</script>	
	</body>
</html>
